<template>
    <el-card>
        <div ref="chartContainer" class="chart"></div>
    </el-card>
</template>
<script setup>
import { onMounted, ref, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import eventBus from '/eventBus';

const chartContainer = ref(null);
let myChart = null;

watch(() => eventBus.state.scores, (newScores) => {
    nextTick(() => {
        initChart();
    });
}, { deep: true });
const initChart = () => {
    const myChart = echarts.init(chartContainer.value);
    const option = {
        title: {
            text: '学生成绩分布',
            left: 'center',
            top: '1%',
            // textStyle: {
            //     fontSize: 50,
            //     // color: '#F1F1F3'
            // }
        },
        tooltip: {
            trigger: 'item',
            // position: [30, 20]
        },
        legend: {
            // top: '59%',
            // left: 'center',
            // textStyle: {
            //     fontSize: 30,
            // }
            top: '95%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                // radius: ['210%', '70%'],
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10,
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        }
                    }
                },
                label: {
                    show: false,
                    position:'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: eventBus.state.scores
            }
        ]
    };
    myChart.setOption(option);
};

onMounted(() => {
    // 初始化或重置图表
    // console.log("eventBus.state.scores", eventBus.state.scores);
    if (eventBus.state.scores.length) {
        // convertType(eventBus.state.averageScores);
        nextTick(() => {
            initChart();
        });
    }
});
</script>

<style scoped lang="scss">
.chart{
    width: 700px;
    height: 450px;
    // width: 900px;
    // height: 950px;
}
</style>
